<template>

  <div class="row" v-if="list && list.length>0">
      <div  class="cardItem"   v-for="item,index in list" :key="index" >
          <img class="img" :src="item.image" @click="openDetail(item)"/>
          <div class="cardItem-btn" >
            <el-tag size="small" type="warning">{{item.categories}}</el-tag>
            <el-dropdown trigger="click">
              <img style="width: 20px;height: 20px;" src="../../assets/dot.png" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="Plus"  @click="Rename(item)">
                    <div class="namebutton">Rename</div>
                  </el-dropdown-item>
                  <el-dropdown-item :icon="CirclePlusFilled"  @click="Delete(item.id)">
                   
                     <div class="namebutton">Delete</div>
                  </el-dropdown-item>
                  
                </el-dropdown-menu>
              </template>

              </el-dropdown>
          </div>
          <div style="margin-top: 0px;padding-left: 10px; text-overflow: ellipsis;overflow: hidden; " @click="openDetail(item)">
            <div>{{item.title}}</div>
          </div>
          <!-- <div style="margin-top: 0px;padding-left: 10px;">
            <el-progress :percentage="item.percentage" color="#ff5722" ><div></div></el-progress>
          </div> -->
      </div>


      <el-dialog align-center v-model="disCardDialogVisible" width="500" center :showClose="false"
      style="border-radius: 15px;"  class="confirmDialog">
      <span style="display: flex;justify-content: center;font-size: large;color: #000;">Are you sure to delete the plan?</span>
      <template #footer>
          <div class="dialog-footer">
              <el-button class="cancel-btn" @click="disCardDialogVisible = false">Cancel</el-button>
              <el-button class="confirm-btn" type="primary" @click="confirmDisCard">
                  Confirm
              </el-button>
          </div>
      </template>
  </el-dialog>
     

  <el-dialog align-center v-model="renameDialogVisible" width="500" center :showClose="false" style="border-radius: 15px;"
  class="confirmDialog">
  <span style="display: flex;justify-content: flex-start;font-size: large;color: #000;">Please rename your plan:</span>
  <el-input v-model="title" />
  <template #footer>
      <div class="dialog-footer">
          <el-button class="cancel-btn" @click="renameDialogVisible = false">Cancel</el-button>
          <el-button class="confirm-btn" type="primary" @click="confirmRename">
              Confirm
          </el-button>
      </div>
  </template>
</el-dialog>



  </div>
  <div class="no-row" v-else>
    <div>No plan added yet.</div>
  </div>
</template>
<script setup>
  
  import { ref, watch, onMounted } from 'vue';
  import { getGuid, userGuidDel,rename } from '@/api/index';
  import { useRouter, useRoute } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import cache from "@/plugins/cache";
  const disCardDialogVisible = ref(false)
  const renameDialogVisible = ref(false)
  const renameitem = ref({})
  const title = ref('')
  const closeText = ref('Are you sure to delete the plan?');
  const route = useRoute();
const routers =useRouter();
  const always = ref(true)
  const delId = ref('')
      // 接收父组件传递的查询参数
      const props = defineProps({
    queryParam: {
      type: Object,
      required: true
    }
  });
function Rename(params) {
renameitem.value = params;
title.value = params.title;
renameDialogVisible.value = true
}

function Delete(id) {
  disCardDialogVisible.value = true;
  delId.value = id
}
function confirmDisCard(){
  userGuidDel({id: delId.value}).then(res=>{
    if(res.code==200){
      ElMessage({
          type: 'success',
          message: 'Delete success',
      })
disCardDialogVisible.value = false;
    }
getGuid(props.queryParam).then(res => {

      list.value = res.content;  // 使用 list.value 来更新 list
    }).catch(error => {
      console.error('Failed to fetch data:', error);
    });
  })
}

function confirmRename(params) {
  const confirmObj = renameitem.value;

  rename({id:confirmObj.id, title:title.value}).then(res=>{
  if(res.code==200){
      ElMessage({
          type: 'success',
          message: 'success',
      })
      renameDialogVisible.value = false;
      getGuid(props.queryParam).then(res => {

      list.value = res.content;  // 使用 list.value 来更新 list
      }).catch(error => {
      console.error('Failed to fetch data:', error);
      });
    }
})
}




  function openDetail(item) {
    cache.session.remove('events')
    sessionStorage.removeItem('plans')
    cache.session.setJSON('prePath',route.path)
    routers.push({
      path:'/stepTwo',
        query:{
          id:item.id
        }
      })
  }
  // 响应式变量
  const list = ref([]);
  // const queryParam = {
  //   page:1,
  //   size:3
  // }
  // // 获取数据列表
  // function getList() {
    getGuid(props.queryParam).then(res => {
      // console.log(res);
      // if(res.content.length>0){
      //   for (let index = 0; index < res.content.length; index++) {
      //     const element = res.content[index];
      //    element.GuidEntity['percentage'] = compuetePercentage(element.GuidEntity)
      //     list.value.push(element.GuidEntity)
      //   }
      // }
      list.value = res.content;  // 使用 list.value 来更新 list
    }).catch(error => {
      console.error('Failed to fetch data:', error);
    });

    function compuetePercentage(GuidEntity) {
      let total = 0;
      let hastrue = 0;
      if(!GuidEntity.plans){
        return 0;
      }
      for (let index = 0; index < GuidEntity.plans.length; index++) {
        let element = GuidEntity.plans[index];
        element.content.forEach(element => {
          total = total+1;
          if(element.selection){
            hastrue = hastrue+1;
          }
          return element
        });
      }
      if(hastrue==0 || total==0){
        return 0;
      }
      // 计算百分比
      let percentage = (hastrue / total) * 100;
        // 将百分比取整
        return Math.floor(percentage);
     
      
    }

  // }
  
  // // 观察 queryParam 的变化并重新获取数据
  // watch(() => props.queryParam, () => {
  //   getList();
  // }, { deep: true });
  
  // // 组件挂载后获取数据
  // onMounted(() => {
  //   getList();
  // });
  </script>
<style scoped>
.cardItem-btn{
  margin-top: 10px;
  display: flex;
  padding: 10px;
  justify-content: space-between;
}
.row {
  display: flex;
  justify-content: start;
}
.no-row{
  height: 250px;
  border-radius: 10px;
  box-shadow: 13px 5px 20px 0px rgb(206 206 206 / 27%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8a8a8a;
}
.cardItem{
  width: 300px;
  height: 310px;
  border-radius: 10px;
  box-shadow: 13px 5px 20px 0px rgb(206 206 206 / 27%);
  margin-bottom: 10px;
}
.img{
  border-radius: 10px 10px 0px 0px;
  width: 288px;
  height: 200px;
  
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.Guid-image{
  width: 250px;
  height: 160px;
  border-radius: 10px;
}
.title{
  font-weight: 500;
  font-size: x-large;
  color: #000;
  margin-bottom: 0;
}
.tips{
  font-weight: 400;
font-size: 18.0439px;
line-height: 21px;
color: #5a5a5a;
}
.noneList{
  width: 100%;
  display: flex;
  justify-content: center;
  height: 150px;
  line-height: 100px;
  padding: 20px;
  margin-right: 10px;
  border-radius: 20px;
  background-color: #fafafa;
}

/* 确认框 start*/
.cancel-btn {
  background-color: #cacaca;
  border-color: #c9c9c9;
  margin-right: 65px;
  color: #000;
  width: 100px;
}
.confirm-btn {
  background-color: #ff8800;
  border-color: #ff8800;
  color: #000;
  width: 100px;
}

</style>
